<template>
  <div>
    <slot></slot>
    <div class="category">
      <a href="javasript:;" v-for="item in categorylist" :key="item">{{ item }}</a>
    </div>
    <p class="categoryInfo">{{ info }}</p>
    <a href="javascript:">
      <img :src="bigImg" class="bigImg" />
    </a>
    <ul class="list">
      <li v-for="item in list" :key="item.id">
        <a href="javascript:;">
          <img :src="item.img1" />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    categorylist: Array,
    bigImg: String,
    list: Array,
    info: String
  }
}
</script>

<style>
.category {
  padding: 20px;
  text-align: center;
  background: rgb(0, 51, 102);
}

.category a {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  width: 80px;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  margin-right: 10px;
}

.categoryInfo {
  padding-top: 20px;
  background: rgb(0, 51, 102);
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding-bottom: 10px;
}

.bigImg {
  width: 100%;
}

.list {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  background: #eee;
}

.list li {
  width: 50%;
  box-sizing: border-box;
  padding: 5px;
}

.list img {
  width: 100%;
}
</style>